<template>
	<div class="index">

		<a-modal v-model="visible" title="Message" :footer="null">
			<h4>MessageCode : {{message.MessageCode}}</h4>
			<h4>MessageData : </h4>
			<a-textarea
			      v-model="message.MessageData"
			      placeholder=""
			      :auto-size="{ minRows: 3, maxRows: 10 }"
				  :disabled="true"
			    />
			<h4>Topic : {{message.Topic}}</h4>
			<h4>CreateTime : {{message.CreateTime}}</h4>
			<h4>ConsumedTime : {{message.ConsumedTime}}</h4>
			<h4>DelayTime : {{message.DelayTime}}</h4>
			<h4>Status : {{message.Status}}</h4>
			
			<a-popconfirm title="Delete?" ok-text="Yes" cancel-text="No"
				@confirm="() => delMessage(message.MessageCode)">
				<a-button type="danger" style="margin-top: 10px;">Delete</a-button>
			</a-popconfirm>
		</a-modal>

		<a-card style="margin: 15px;" hoverable="true">
			<a-row :gutter="16">

				<a-col :span="5">
					<a-date-picker v-model="startTime" format="YYYY-MM-DD HH:mm:ss" placeholder="Start" show-time>
					</a-date-picker>
				</a-col>

				<a-col :span="5">
					<a-date-picker v-model="endTime" format="YYYY-MM-DD HH:mm:ss" placeholder="End" show-time>
					</a-date-picker>
				</a-col>

				<a-col :span="6">
					<a-input placeholder="Topic" v-model="topic" />
				</a-col>

				<a-col :span="4">
					<a-dropdown style="width: 150px;">
						<a-menu slot="overlay" @click="onSelect">
							<a-menu-item key="3">
								<a-icon type="user" />All
							</a-menu-item>
							<a-menu-item key="1">
								<a-icon type="user" />Consumed
							</a-menu-item>
							<a-menu-item key="0">
								<a-icon type="user" />delay
							</a-menu-item>
							<a-menu-item key="-1">
								<a-icon type="user" />Unconsumed
							</a-menu-item>
						</a-menu>
						<a-button style="margin-left: 4px">
							{{ tip }}
							<a-icon type="down" />
						</a-button>
					</a-dropdown>
				</a-col>

				<a-col :span="4">
					<a-button type="primary" @click="selectMessage()" :loading="loading">Select</a-button>
				</a-col>
			</a-row>

			<a-table size="small" style="margin-top: 15px;" :columns="messageTitle" :data-source="messageList"
				:pagination="{ pageSize: 50 }" bordered>
				<span slot="action" slot-scope="text, record">
					<a @click="() => getMessage(record.MessageCode)">Read</a>
				</span>
			</a-table>
		</a-card>
	</div>
</template>

<script src="./Message.js">

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.index {}
</style>
